<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8"/>
  <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Document</title>
  <!-- 引入样式 -->
  <link rel="stylesheet" href="../../plugins/element-ui/index.css"/>
  <link rel="stylesheet" href="../../styles/common.css"/>
  <link rel="stylesheet" href="../../styles/page.css"/>
</head>
<body>
  <div class="addBrand-container" id="employee-add-app">
    <div class="container">
      <el-form
        ref="ruleForm"
        :model="ruleForm"
        :rules="rules"
        :inline="false"
        label-width="180px"
        class="demo-ruleForm"
      >
        <el-form-item label="帐号" prop="account">
          <el-input v-model.trim="ruleForm.account" placeholder="请输入帐号" maxlength="16"/>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model.trim="ruleForm.password" placeholder="请输入密码" maxlength="18"/>
        </el-form-item>
        <el-form-item label="手机号码" prop="phoneNumber">
          <el-input v-model.trim="ruleForm.phoneNumber" placeholder="请输入手机号码" maxlength="11"/>
        </el-form-item>
        <el-form-item label="员工姓名" prop="username">
          <el-input v-model.trim="ruleForm.username" placeholder="请输入员工姓名" maxlength="12"/>
        </el-form-item>
        <el-form-item label="性别" prop="sex">
          <el-radio-group v-model="ruleForm.sex">
            <el-radio label="男"></el-radio>
            <el-radio label="女"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="设置为管理员" prop="role">
          <el-switch v-model="ruleForm.role"></el-switch>
        </el-form-item>
        <div class="subBox address">
          <el-form-item>
            <el-button @click="goBack">取消</el-button>
            <el-button type="primary" @click="submitForm('ruleForm',false)" :disabled="submitting">保存</el-button>
            <el-button type="primary" class="continue" @click="submitForm('ruleForm',true)" :disabled="submitting">保存并继续添加</el-button>
          </el-form-item>
        </div>
      </el-form>
    </div>
  </div>
  <!-- 开发环境版本，包含了有帮助的命令行警告 -->
  <script src="../../plugins/vue/vue.js"></script>
  <!-- 引入组件库 -->
  <script src="../../plugins/element-ui/index.js"></script>
  <!-- 引入axios -->
  <script src="../../plugins/axios/axios.min.js"></script>
  <script src="../../js/request.js"></script>
  <script src="../../js/validate.js"></script>
  <script src="../../api/employee.js"></script>
  <script>
    new Vue({
      el: '#employee-add-app',
      data() {
        return {
          ruleForm: {
            account: '',
            password: '',
            phoneNumber: '',
            username: '',
            sex: '男',
            role: false
          },
          submitting: false
        }
      },
      computed: {
        rules() {
          return {
            account: [{required: true, validator: checkAccount, trigger: 'blur'}],
            password: [{required: true, validator: checkPassword, trigger: 'blur'}],
            phoneNumber: [{required: true, validator: checkPhoneNumber, trigger: 'blur'}],
            username: [{required: true, validator: checkUsername, trigger: 'blur'}]
          }
        }
      },
      created() {},
      methods: {
        submitForm(formName, st) {
          this.submitting = true
          this.$refs[formName].validate((valid) => {
            if (valid) {
              const params = {
                ...this.ruleForm,
                sex: this.ruleForm.sex === '女' ? 0 : 1,
                role: this.ruleForm.role ? 1 : 0
              }
              addEmployeeApi(params).then(res => {
                window.parent.$message.success("添加成功")
                if (!st) {
                  this.goBack()
                } else {
                  this.$refs[formName].resetFields()
                }
                this.submitting = false
              }).catch(error => {
                this.$message.error(`${error.message}，添加失败`)
                this.submitting = false
              })
            } else {
              console.log('error submit!')
              this.submitting = false
              return false
            }
          })
        },
        goBack() {
          window.parent.menuHandle({
            id: '1',
            url: '/backend/page/employee/list.html',
            name: '员工管理'
          },false)
        }
      }
    })
  </script>
</body>
</html>